<template>
  <div class="content-wraper">
    <div class="search-box">
      <el-form label-width="100px" :inline="true">
        <el-form-item label="项目名称">
          <el-input v-model="projectName" />
        </el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="search()"
        >查询</el-button>
        <el-button
          type="warning"
          icon="el-icon-refresh"
          @click="reset()"
        >重置</el-button>
        <el-button
          type="success"
          icon="el-icon-plus"
          @click="addBuildUnit()"
        >新增</el-button>
      </el-form>
    </div>
    <div class="detail">
      <com-table
        :data="dataList"
        :columns="columns"
        :total="total"
        @pageChange="pageChange"
      >
        <template v-slot:createTime="{row: {createTime}}">
          {{ dateFormat(createTime) }}
        </template>
        <template v-slot:name="{ row }">
          <a class="com-link" @click="viewDetail(row)">{{ row.name }}</a>
        </template>
        <template v-slot:options="{ row }">
          <!-- <el-button type="success" icon="el-icon-edit-outline" size="mini" @click="startProcess(row)">提交</el-button> -->
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click="editBuildUnit(row)"
          >编辑</el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="delBuildUnit(row)"
          >删除</el-button>
          <el-button
            type="success"
            size="mini"
            @click="print(row)"
          >打印</el-button>
        </template>
      </com-table>
    </div>
    <el-dialog
      :close-on-click-modal="false"
      title="项目施工日志详细信息"
      :visible.sync="showModal"
      width="1000px"
      center
    >
      <addProjectDailyRecord
        ref="addModal"
        :data="rowData"
        :opt-type="optType"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="showModal = false">取 消</el-button>
        <el-button
          type="primary"
          :loading="loading"
          @click="saveRecord"
        >确 定</el-button>
      </span>
    </el-dialog>
    <process-start
      :show-modal.sync="showStartModal"
      :currentrow="unitDetail"
      @freshList="search"
    />
    <workflow-schedule
      :show-modal.sync="showWorkflowSchedule"
      :data="workflowScheduleData"
    />
    <section>
      <div v-show="printIs == true" id="printoder" ref="print">
        <div class="content">
          <h5>项目施工详情信息</h5>
          <div class="title">
            <div class="title-1">项目名称:{{ printData.projectName }}</div>
            <div class="title-2">日期:{{ printData.createTime }}</div>
            <div class="title-2">编制人:{{ printData.founderName }}</div>
            <div class="title-2">温度:{{ printData.temperature }}</div>
            <div class="title-2">天气:{{ printData.weather }}</div>
          </div>
          <div class="table">
            <div class="th">施工部位情况</div>
            <div class="td">{{ printData.constructionSiteSituation }}</div>
          </div>
          <div class="table">
            <div class="th">用工情况</div>
            <div class="td">{{ printData.employmentSituation }}</div>
          </div>
          <div class="table">
            <div class="th">材料设备情况</div>
            <div class="td">{{ printData.materialDeviceSituation }}</div>
          </div>
          <div class="table">
            <div class="th">施工进度情况</div>
            <div class="td">{{ printData.constructionScheduleSituation }}</div>
          </div>
          <div class="table">
            <div class="th">工程报验等情况</div>
            <div class="td">{{ printData.projectInspectionSituation }}</div>
          </div>
          <div class="table">
            <div class="th">安全文明生成情况</div>
            <div class="td">{{ printData.safeProductionSituation }}</div>
          </div>
          <div class="table">
            <div class="th">重要事项记录</div>
            <div class="remark">{{ printData.importantMattersRecord }}</div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import workflowSchedule from '@/components/TreeModal/workflowSchedule'
import moment from 'moment'

import {
  getProjectConstructionLogList,
  deleteProjectConstructionLog,
  addProjectConstructionLog,
  updateProjectConstructionLog
} from '@/api/planManage'
import addProjectDailyRecord from './components/addProjectDailyRecord.vue'
export default {
  name: 'ProjectDailyRecord',
  components: {
    addProjectDailyRecord,
    workflowSchedule
  },
  data() {
    return {
      printIs: false,
      unitDetail: {},
      printData: {},
      projectName: '',
      dataList: [],
      total: 0,
      showStartModal: false,
      pageParams: {
        pageNum: 1,
        pageSize: 10
      },
      showWorkflowSchedule: false,
      workflowScheduleData: {},
      showModal: false,
      loading: false,
      optType: 'add',
      rowData: {},
      columns: [
        {
          label: '项目名称',
          prop: 'projectName',
          width: '250'
        },
        {
          label: '编制时间',
          prop: 'createTime',
          slot: 'createTime',
          width: '90'
        },
        {
          label: '温度',
          prop: 'temperature',
          width: '90'
        },
        {
          label: '天气',
          prop: 'weather',
          width: '90'
        },
        {
          label: '施工部位情况',
          prop: 'constructionSiteSituation',
          attrs: {
            showOverflowTooltip: true
          }
        },
        {
          label: '用工情况',
          prop: 'employmentSituation',
          attrs: {
            showOverflowTooltip: true
          }
        },
        {
          label: '材料设备情况',
          prop: 'materialDeviceSituation',
          attrs: {
            showOverflowTooltip: true
          }
        },
        {
          label: '施工进度情况',
          prop: 'constructionScheduleSituation',
          attrs: {
            showOverflowTooltip: true
          }
        },
        {
          label: '工程报验情况',
          prop: 'projectInspectionSituation',
          attrs: {
            showOverflowTooltip: true
          }
        },
        {
          label: '安全文明生成情况',
          prop: 'safeProductionSituation',
          attrs: {
            showOverflowTooltip: true
          }
        },
        {
          label: '重要事项记录',
          prop: 'importantMattersRecord',
          attrs: {
            showOverflowTooltip: true
          }
        },
        {
          fixed: 'right',
          label: '操作',
          width: '260',
          prop: 'options',
          slot: 'options'
        }
      ]
    }
  },
  mounted() {
    this.getDataList()
  },
  methods: {
    print(row) {
      this.printData = row
      this.printData.createTime = moment(this.printData.createTime).format('YYYY-MM-DD')
      this.printIs = true
      setTimeout(() => {
        this.$print(this.$refs.print)
      }, 500)
      setTimeout(() => {
        this.printIs = false
      }, 1000)
    },
    dateFormat(data) {
      if (data) {
        return moment(data).format('YYYY-MM-DD')
      } else {
        return ''
      }
    },
    getWorkflowDetail(data) {
      this.showWorkflowSchedule = true
      this.workflowScheduleData = data
    },
    startProcess(data) {
      this.unitDetail = data
      this.showStartModal = true
    },
    pageChange(data) {
      this.pageParams = data
      this.getDataList()
    },
    getDataList() {
      const params = {
        ...this.pageParams,
        projectName: this.projectName
      }
      getProjectConstructionLogList(params).then((res) => {
        const { data, total } = res.data || {}
        if (data) {
          this.dataList = data
          this.total = total - 0
        }
      })
    },
    addBuildUnit() {
      this.optType = 'add'
      this.showModal = true
    },
    editBuildUnit(data) {
      this.optType = 'edit'
      this.rowData = data
      this.showModal = true
    },
    viewDetail(data) {
      this.optType = 'detail'
      this.rowData = data
      this.showAddFileModal = true
    },
    delBuildUnit(data) {
      this.$confirm('确定要删除该项目施工日志吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const { id } = data
          deleteProjectConstructionLog({
            projectConstructionLogId: id
          }).then((res) => {
            const { code, msg } = res
            if (code === '0001') {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.getDataList()
            } else {
              this.$message({
                type: 'error',
                message: msg || '删除失败!'
              })
            }
          })
        })
        .catch(() => {})
    },
    search() {
      this.pageParams.pageNum = 1
      this.getDataList()
    },
    reset() {
      this.projectName = ''
    },
    saveRecord() {
      this.$refs.addModal.saveRecord((data) => {
        if (data) {
          this.loading = true
          const fnInstance =
            this.optType === 'add'
              ? addProjectConstructionLog(data)
              : updateProjectConstructionLog(data)
          fnInstance
            .then((res) => {
              this.loading = false
              if (res.code === '0001') {
                this.$message({
                  type: 'success',
                  message: '保存成功!'
                })
                this.showModal = false
                this.getDataList()
                this.$refs.addModal.resetForm()
                // this.$emit('freshList')
                // this.$refs.form.resetFields()
              } else {
                this.$message({
                  type: 'error',
                  message: res.msg
                })
              }
            })
            .catch(() => {
              this.loading = false
            })
        }
      })
    },
    cancel() {}
  }
}
</script>

<style lang="scss" scoped>
.search-box {
  height: 50px;
}
.detail {
  height: calc(100% - 50px);
}
#printoder {
  .content {
    width: 794px;
    height: 1173px;
    border: 1px solid #000;
    text-align: center;
  }
  .head {
    display: flex;
    justify-content: space-between;
    padding: 20px;
  }
  h5 {
    font-size: 20px;
  }
  .title {
    display: flex;
    padding: 0px 10px;
    .title-1 {
      width: 300px;
      display: flex;
      align-items: center;
    }
    .title-2 {
      width: 150px;
      display: flex;
      align-items: center;
    }
  }
  .table {
    width: 100%;

    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    display: flex;
    align-items: center;
    .th {
      width: 250px;
      padding: 10px 10px;
      display: flex;
      align-items: center;
      border-right: 1px solid #000;
    }
    .td {
      width: 542px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      height: 30px;
      -webkit-line-clamp: 2;
    }
    .remark {
      width: 542px;
      height: 30px;
      -webkit-line-clamp: 3;
    }
  }
}
</style>
